<template>
  <div class="index">
    <!-- 维修档案 -->
    <h2
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >维修档案</h2>
    <div class="monter">
      <table class="monter-first">
        <tr>
          <td>
            <div class="block">
              <span class="demonstration">开始时间：</span>
              <el-date-picker v-model="valuedate" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </td>
          <td>
            <div class="block">
              <span class="demonstration">结束时间：</span>
              <el-date-picker v-model="value2" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </td>
          <td>
            <el-button type="info" icon="el-icon-refresh-right" size="mediu" @click="congz">重置</el-button>
            <el-button type="primary" icon="el-icon-zoom-in" size="mediu" @click="sosuo">查询</el-button>
          </td>
        </tr>
        <tr>
          <td class="trd">
            <div class="sl">搜索:</div>
            <el-input v-model="input3" placeholder="请输入内容"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="last">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="维修单号"></el-table-column>
        <el-table-column prop="equipment" label="装备名称"></el-table-column>
        <el-table-column prop="equipmentNumber" label="装备编号"></el-table-column>
        <el-table-column prop="desc" label="故障描述"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="testResults" label="维修结果"></el-table-column>
        <el-table-column prop="xd" label="操作">
          <template slot-scope="scope">
            
             <el-button
            class="view_btn"
            type="primary"
            icon="el-icon-view"
            @click="lookxq(scope.row)"
            size="small"
          > </el-button>
          <el-button
            class="del_btn"
            type="primary"
            icon="el-icon-delete"
             @click="delet(scope.row.id)"
            size="small"
          >
          </el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <div class="nex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="totle"
        ></el-pagination>
        <div class="demonstration">直接前往</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      input3: "",
      valuedate: "",
      currentPage3: 1,
      page: 1,
      limit: 5,
      totle: 0,
      tableData: [
        {
          weiId: 20123212,
          zbName: "轻型步兵战车",
          zbid: "9451516",
          gzcom: "发动机启动不了，刹车失灵",
          startdate: "2021/10/1",
          enddate: "维修中",
          wxjg: "成功"
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.xuanr();
    },
    //删除
    delet(ev) {
      this.$axios({
        url: "/keepFile/delete",
        method: "delete",
        params: {id:ev}
      }).then(res => {
        console.log(res);
        this.xuanr();
        if(!res.data.data){
            this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        }else{
           this.$message({
          showClose: true,
          message: '删除失败',
          type: 'warning'
        });
        }
      });
    },
    //查看这个维修档案
    lookxq(row) {
      let wxjl_data = row;
      this.$store.state.tjy_vuex.wxjl_data = wxjl_data;
      sessionStorage.setItem("wxjlInfo", JSON.stringify(wxjl_data));
      this.$router.push("/home/Daxq");
    },
    switchDate: function(sj) {
      var now = new Date(sj);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      return year + "-" + month + "-" + date;
    },
    //渲染页面
    xuanr() {
      this.tableData = [];

      console.log(this.input3, this.value2, this.valuedate);
      this.$axios({
        url: "/keepFile/queryAllkeepFile",
        method: "post",
        params: {
          page: this.page,
          limit: 5
        },
        data: {
          endTime: this.value2,
          id: this.input3,
          startTime: this.valuedate
        }
      }).then(res => {
        console.log(res.data);
        this.totle = res.data.total;
        for (let i = 0; i < res.data.data.length; i++) {
          res.data.data[i].equipment = res.data.data[i].equipment.equipmentName;
          res.data.data[i].startTime = this.switchDate(
            res.data.data[i].startTime
          );
          res.data.data[i].endTime = this.switchDate(res.data.data[i].endTime);
          res.data.data[i].testResults =
            res.data.data[i].testResults == 1 ? "维修成功" : "待维修";
          this.tableData.push(res.data.data[i]);
        }
      });
    },
    //重置
    congz() {
      (this.input3 = ""),
        (this.value2 = ""),
        (this.valuedate = ""),
        (this.page = 1);
      this.xuanr();
    },
    //搜索
    sosuo() {
      this.xuanr();
    }
  },
  mounted: function() {
    this.xuanr();
  }
};
</script>

<style scoped>
.index {
  padding: 30px;
}

.monter-first {
  width: 1900px;
  margin: 40px;
}
tr > td {
  width: 500px;
}
tr {
  height: 50px;
  line-height: 50px;
}
.trd {
  display: flex;
  width: 300px;
}
table {
  width: 1900px;
}
.trd > div:nth-child(1) {
  width: 70px;
}
.index .monter .el-input__inner {
  width: 160px;
}
.nex {
  margin-top: 30px;
  text-align: center;
  display: flex;
  justify-content: right;
  margin-right: 20px;
  align-items: center;
}
.sl {
  width: 1800px;
  margin-right: 30px;
  padding-left: 9px;
}
.demonstration {
  margin-left: 10px;
}
</style>